<template>
	<view class="four">
		<view class="four-top">
			<view class="flex four-font four-padd" @tap="classTap({name:'',id:0})">
				<text class="four-title">所有商品</text>
				<i class="icon">&#xe637;</i>
			</view>
			<view class="four-zan"></view>
		</view>
		<scroll-view scroll-y="true"  class="product" :style="{height:classifyHei+'px'}" @scroll="scrollLoad">
			<view v-for="(item,index) in classList" :key="index" class="product-list">
				<view class="flex four-font product-padd" @tap="classTap(item)">
					<text class="four-title">{{item.name}}</text>
					<i class="icon">&#xe637;</i>
				</view>
				<view class="four-list">
					<text v-for="(list,key) in item.child" @tap="classTap(list)" :key="key">{{list.name}}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props:{
			searchHeight:{
				type:Number
			},
			classList:{
				type:Array
			}
		},
		data() {
			return {
				classifyHei:0,
				isF: false,
				yuanH:200
			};
		},
		mounted() {
			var that = this;
			var version = uni.getSystemInfoSync().version;
			this.$nextTick( ()=> {
				if(!version){
					const query = uni.createSelectorQuery()
					query.select('.four-top').boundingClientRect(data => {
						// 若消息体没有超过2倍的键盘则向下移动差值,防止遮住消息体
						// console.log(data)
						try{
							that.classifyHei = that.searchHeight - data.height;
							// console.log('打撒',that.classifyHei)
						}catch(e){
							//TODO handle the exception
							console.log(e)
						}
						
					}).exec();
				}else{
					var observer = uni.createIntersectionObserver(this);
						observer.relativeTo('.four').observe('.four-top', (res) => {
						   // console.log('observer',res)
						   let height = res.boundingClientRect.height;
						   that.classifyHei = that.searchHeight - height;
					})
				}
			    // Code that will run only after the
			    // entire view has been rendered
			})
		},
		methods:{
			scrollLoad(e){
				// console.log(e)
			},
			classTap(item){
				uni.navigateTo({
					url: '/pageB/classify/classProduct?name='+item.name+'&id='+item.id
				})
			}
		}
	}
</script>

<style lang="less">
	.product-list{
		padding: 0 30upx;
	}
	.four-zan{
		width: 100%;
		height: 20upx;
		background-color: #F9F9F9;
	}
	.four-padd{
		padding: 30upx 24upx;
		box-sizing: border-box;
	}
	.icon{
		color: #999999;
		font-size: 24upx;
	}
	.four-list{
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		text{
			min-width: 45%;
			padding: 27upx 0 27upx 37upx;
			box-sizing: border-box;
			font-size: 26upx;
			color: #333333;
			background-color: #F9F9F9;
			margin-bottom: 20upx;
		}
	}
	.flex{
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		width: 100%;
	}
	.four-font{
		.four-title{
			font-size: 28upx;
			color: #000000;
		}
	}
	.product-padd{
		padding: 30upx 0;
	}
</style>
